import {createApp} from 'vue'
import App from './App.vue'
// 全局引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入router/index.js里的router
import router from "@/router";
//引入 ElementPlus Icon 图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//引入公共样式
import './assets/less/index.less'
//引入vuex
import store from './store/index'
//引入mock
import './mock/mock'
//引入全局接口管理
import api from './api/api'

const app = createApp(App)

// 绑定到Vue应用程序实例的全局属性上，这样在任何组件中都可以通过
// this.api' 来访问和使用 'api'。这是一种常见的在Vue应用程序中全局共享数据或功能的方法。
app.config.globalProperties.$api = api
// 将ElementPlus库添加到Vue应用程序中
app.use(ElementPlus)
// 将定义的路由 router 添加到应用程序 app 中
app.use(router)
// 将定义的 store 添加到应用程序 app 中,vuex用来做状态管理，简化组件间的通信
app.use(store)

//将ElementPlus Icon 图标添加到Vue应用程序中
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.mount('#app')
